<template>
  <a-layout class="flex-display" style="height: 100vh; background-color: white;">
    <div class="height100 width100 flex-column flex-justify-start flex-align-start">
      <a-row class="pt20 pl20" style="height: 45px; width: 100vw" align="middle">
        <a-col :span="1">
          <span style="color: #1fa3f6" class="fz26"><SendOutlined rotate="90"/></span>
        </a-col>
        <a-col :span="20">
          <span class="fz20 pl5">{{ drone.data.model }}</span>
        </a-col>
        <a-col :span="3">
          <span class="fz16" v-if="drone.data.bound_status" style="color: #737373">Bound</span>
          <a-button type="primary" @click="onBindDevice" v-else>Bind</a-button>
        </a-col>
      </a-row>
    </div>
  </a-layout>
</template>

<script lang="ts" setup>
import {SendOutlined} from '@ant-design/icons-vue'
import {message} from 'ant-design-vue'
import {reactive} from 'vue'
import {BindBody, bindDevice} from '/@/api/manage'
import {getRoot} from '/@/root'
import {ELocalStorageKey} from '/@/types'
import {DeviceStatus} from '/@/types/device'

const root = getRoot()

interface DeviceStatusData {
  data: DeviceStatus
}

const drone = reactive<DeviceStatusData>({
  data: JSON.parse(localStorage.getItem(ELocalStorageKey.Device)!)
})

function onBindDevice() {
  const bindParam: BindBody = {
    device_sn: drone.data.sn,
    user_id: localStorage.getItem(ELocalStorageKey.UserId)!,
    workspace_id: localStorage.getItem(ELocalStorageKey.WorkspaceId)!
  }
  bindDevice(bindParam).then(bindRes => {
    if (bindRes.code !== 0) {
      message.error('bind failed:' + bindRes.message)
      console.error(bindRes.message)
      return
    }
    drone.data.bound_status = true
    localStorage.setItem(ELocalStorageKey.Device, JSON.stringify(drone.data))
  })
}
</script>
